<template>
  <el-drawer v-model="visible" :with-header="false" :size="260">
    <div class="flex flex-col h-full">
      <div class="title-container flex items-center mb-16px">
        <div class="fw-bold tracking-widest">角色权限分配</div>
      </div>

      <div class="flex-grow-1 overflow-y-auto h-0">
        <el-tree ref="menuTreeRef" :data="treeList" node-key="id" :props="{ label: 'title' }" show-checkbox :check-strictly="!checkStrictly" default-expand-all :defaultCheckedKeys></el-tree>
      </div>

      <footer class="flex-center">
        <ep-button svg-icon="Close" @click="handleCancel">取消</ep-button>
        <ep-button svg-icon="Save" type="primary" @click="handleSubmit">提交</ep-button>
      </footer>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
defineOptions({ name: 'AuthPermission' })
import { ElTree } from 'element-plus'
import { TipModal, transformListToTree } from '@/utils'
import { MenuRequest } from '@/api/system/menu.request'
import { RoleRequest } from '@/api/system/role.request'

const emits = defineEmits(['getList'])

/** 抽屉是否可见 */
const visible = ref(false)
/** 是否开启父子联动 */
const checkStrictly = ref<boolean>(false)
/** 默认展开的节点的 key 的数组 */
const defaultCheckedKeys = ref<number[]>([])
const menuTreeRef = ref<InstanceType<typeof ElTree>>()
const treeList = ref<MenuType.TreeEntity[]>([])
const roleId = ref<string>('')

async function findTreeList() {
  const data = await MenuRequest.findList({ status: 1 })
  treeList.value = transformListToTree(data)
}

/** 打开角色授权抽屉的操作 */
async function handleOpen(id: string) {
  roleId.value = id
  visible.value = true
  await findTreeList()
  const role = await RoleRequest.findOneById({ roleId: id })
  const menuIds = role.menus?.map((v) => v.id) || []
  menuTreeRef.value?.setCheckedKeys(menuIds)
}

/** 关闭角色授权抽屉的操作 */
function handleCancel() {
  visible.value = false
}

/** 提交角色授权数据 */
async function handleSubmit() {
  // 获取选中的父节点数据
  const parentIds = menuTreeRef.value?.getHalfCheckedKeys() ?? []
  // 获取选中的子节点数据
  const childIds = menuTreeRef.value?.getCheckedKeys() ?? []
  const menuIds = parentIds.concat(childIds) as string[]
  await RoleRequest.authPermission({ roleId: roleId.value, menuIds })
  TipModal.msgSuccess(`授权成功`)
  visible.value = false
  emits('getList')
}

defineExpose({ handleOpen })
</script>

<style lang="scss" scoped></style>
